<template>
  <Table class="default" v-bind="tableOpts" v-on="tableEvent">
    <template #operator>
      <div class="operator-wrap">
        <modifyAccount ref="dialogRef" @change="fetchCurrentTable" />
      </div>
    </template>
  </Table>
</template>

<script>
import dayjs from "dayjs";
import modifyAccount from "./components/modifyAccount.vue";
import tableMixins from "@/mixins/tableMixins.vue";
export default {
  name: "AccountManage",
  mixins: [tableMixins],
  meta: {
    title: "人员管理",
    icon: "el-icon-user-solid",
    sort: 1000,
    authority: 101,
  },
  components: {
    modifyAccount,
  },
  data() {
    return {
      apiName: "userUserList",
      form: {
        userName: {
          tag: "el-input",
          label: "姓名",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入人员姓名",
          },
        },
        phoneNum: {
          tag: "el-input",
          label: "手机号码",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入手机号码",
          },
        },
      },
    };
  },
  methods: {
    formatData(res) {
      this.total = res?.count || res?.total || 0;
      this.dataSource = (res?.rows || res?.data || res || []).map((e) => {
        if (e.updatedAt)
          e.updatedTime = dayjs(e.updatedAt).format("YYYY-MM-DD HH:mm:ss");
        if (e.createdAt) {
          e.createdTime = dayjs(e.createdAt).format("YYYY-MM-DD HH:mm:ss");
        }
        e.roleName = e?.role?.roleName;
        return e;
      });
    },
    handleAction(opts, row) {
      const { userName: name, userId } = row;
      if (["edit", "editPsd"].includes(opts)) this.showDialog(opts, row);
      else if (opts === "delete")
        this.showConfirm(`确认删除【${name}】？`, "userDeleteUser", { userId });
    },
  },
};
</script>

<style lang="less" scoped>
.default /deep/ .el-button--primary {
  border-color: #ff6a00;
  background-color: #ff6a00;
}

.default /deep/ .el-button:hover {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}
.default /deep/ .el-button:active{
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}
.default /deep/ .el-button:focus{
  color: #ff6a00;
  border-color: #fdf2e9;
  background-color:#fdf2e9;
}

/deep/ .el-input__inner:hover{
  border-color: #ff6a00 !important;
}
/deep/ .el-input__inner:focus{
  border-color: #ff6a00 !important;
}
/deep/ .selected{
  color:#ff6a00 !important;
}
/deep/ .active{
  color:#ff6a00 !important;
}
/deep/ .selected{
  color:#ff6a00 !important;
}
/deep/ .el-loading-text{
  color:#ff6a00 !important;
}
/deep/ .el-icon-loading{
  color:#ff6a00 !important;
}</style>
